<template>
  <div class="home">
    <my-header>
      <button @click="show = true">筛选</button>
    </my-header>
    <ul class="nav">
      <li @click="change(0)" :class="{ active: $store.state.status == 0 }">
        全部{{ $store.state.list.length }}
      </li>
      <li @click="change(1)" :class="{ active: $store.state.status == 1 }">
        未使用{{ $store.getters.num.num1 }}
      </li>
      <li @click="change(2)" :class="{ active: $store.state.status == 2 }">
        已使用{{ $store.getters.num.num2 }}
      </li>
    </ul>

    <my-list></my-list>

    <van-popup
      v-model="show"
      position="right"
      :style="{ width: '50%', height: '100%' }"
    >
      <ul class="tags">
        <li
          v-for="item in tags"
          :key="item.num"
          :class="{ active: num == item.num }"
          @click="chooseItem(item.num)"
        >
          {{ item.name }}
        </li>
      </ul>

      <van-button>取消</van-button>
      <van-button type="primary" @click="filterData">确定</van-button>
    </van-popup>
  </div>
</template>

<script>
// @ is an alias to /src
import myHeader from "@/components/myHeader.vue";
import myList from "@/components/myList.vue";

export default {
  name: "HomeView",
  data() {
    return {
      show: true,
      tags: [
        { name: "3天内", num: 3 },
        { name: "5天内", num: 5 },
        { name: "7天内", num: 7 },
      ],
      //筛选的数据
      num: "",
      //把筛选的天数保存下来
    };
  },
  components: {
    myHeader,
    myList,
  },
  created() {
    this.$axios.get("data.json").then((res) => {
      console.log(res);
      this.$store.commit("setData", res.data.cuponData);
    });
    //进入页面请求数据 并存在vuex里
  },
  methods: {
    change(i) {
      this.$store.commit("change", i);
    },
    //把点击的全部 还是 未使用 已使用存在vuex里
    chooseItem(num) {
      if (this.num == num) {
        this.num = "";
      } else {
        this.num = num;
      }
      //比如：如果本身就是3 那么就为“” 不是3 才为3
    },
    //点击筛选的天数 来回切换
    filterData() {
      this.$store.commit("filterData", this.num);
    },
    //点击确定按钮 根据天数过滤数据
  },
};
</script>
<style lang="scss" scoped>
.nav {
  width: 100%;
  height: 50px;
  display: flex;
  // justify-content: space-around;
  background: pink;
  li {
    flex: 1;
    text-align: center;
    line-height: 50px;
    color: #fff;
  }
  .active {
    color: aqua;
  }
}
.tags {
  display: flex;
  flex-wrap: wrap;
  li {
    width: 80px;
    height: 40px;
    margin: 20px;
    border: 1px solid #ccc;
    border-radius: 3px;
  }
  .active {
    border: 1px solid red;
  }
}
</style>
